<template>
	<view class="content">
		<image class="logo" @click="editImg()" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
        <!-- <imageCanvas :url="url"></imageCanvas> -->
        <chj-imgEdit  ref="chjImgEdit"  @confirm="confirmEdit" @cancel="cancelEdit" ></chj-imgEdit>
	</view>
</template>

<script>
    import imageCanvas from '../../components/imageCanvas.vue';
	export default {
        components:{
            imageCanvas
        },
		data() {
			return {
				title: 'Hello',
                url:'http://lybys.oss-cn-chengdu.aliyuncs.com/uploads/20230530/16854275113965.png',
			}
		},
		onLoad() {
		    this.editImg()
		},
		methods: {
		    confirmEdit(path){
		        console.log('确定');
		        uni.previewImage({
		            urls: [path],
		        });
		    },
		    cancelEdit(){
		        console.log('取消');
		    },
		    editImg(url){
		        let that = this
		        uni.downloadFile({
		            url:'http://lybys.oss-cn-chengdu.aliyuncs.com/uploads/20230530/16854275113965.png',
		            success(e) {
		                console.log('downloadFile',e)
		                that.$refs.chjImgEdit.open({
		                    // 底图路径
		                    path:e.tempFilePath,
		                    // 取消是否有弹窗提示
		                    isCancelToast: true,
		                    // 取消弹窗提示内容
		                    cancelText:"确定退出吗?",
		                    // 确定是否有弹窗提示
		                    isConfirmToast: true,
		                    // 确定弹窗提示内容
		                    confirmText:"确定发送吗?",
		                    // 设置图标
		                    iconPath:{
		                        reset:'/static/repeat-02.png'
		                    },
		                    // 设置涂鸦图标（根据下标匹配）
		                    iconPathGraffiti:{
		                        0:'/static/iconPathGraffiti-1.png'
		                    }
		                });
		            }
		        })
		        
		    }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
